import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(primaryColor: Colors.red),
      home: Scaffold(
        appBar: AppBar(title: const Text('Flutter app')),
        body: MyHomePage(),
      ),
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Container(
      width: double.infinity,
      height: double.infinity,
      color: Colors.grey[200],
      child: Row(
        //mainAxisAlignment: MainAxisAlignment.center, // 元素位置
        mainAxisAlignment: MainAxisAlignment.spaceBetween, // 空间均匀的放置子元素之间
        crossAxisAlignment: CrossAxisAlignment.center, // 纵向居中， 相对于外部容器
        children: [
          IconContainer(Icons.home, color: Colors.red),
          IconContainer(Icons.settings, color: Colors.blue),
          IconContainer(Icons.star, color: Colors.green),
        ],
      ),
    );
  }
}

// 自定义区块
class IconContainer extends StatelessWidget {
  final IconData icon;
  final Color color;
  const IconContainer(this.icon, {super.key, required this.color});

  @override
  Widget build(BuildContext context) {
    return Container(
      alignment: Alignment.center,
      width: 50,
      height: 50,
      color: color,
      child: Icon(Icons.abc, color: Colors.white, size: 28),
    );
  }
}
